<template>
  <div id="app">
    <el-container>
      <!-- 页面头部 -->
      <el-header style="background-color: #409EFF; color: white; text-align: center; font-size: 24px;">
        老年人团建旅游
      </el-header>

      <el-main>
        <!-- 轮播图 -->
        <i class="el-icon-s-home" style="font-size: 30px;margin-top: 1%;" @click="returnToHome"></i>
        <el-carousel :interval="4000" arrow="always" height="300px" indicator-position="outside">
          <el-carousel-item v-for="item in carouselItems" :key="item.id">
            <img :src="item.src" alt="Carousel Image" style="width: 100%; height: 300px; object-fit: cover;">
          </el-carousel-item>
        </el-carousel>

        <!-- 旅游目的地选择 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>选择旅游目的地</span>
          </div>
          <el-select v-model="selectedDestination" placeholder="请选择目的地">
            <el-option v-for="destination in destinations" :key="destination.value" :label="destination.label"
              :value="destination.value">
            </el-option>
          </el-select>
        </el-card>

        <!-- 出行日期选择 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>选择出行日期</span>
          </div>
          <el-date-picker v-model="tripDate" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-card>

        <!-- 个人联系信息 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>填写联系信息</span>
          </div>
          <el-form label-position="top">
            <el-form-item label="姓名">
              <el-input v-model="name"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="phone"></el-input>
              <div style="position: absolute;right: 30px;cursor: pointer;" @click="Sms">发送验证码</div>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="code"></el-input>

            </el-form-item>
          </el-form>
        </el-card>

        <!-- 提交按钮 -->
        <div style="text-align: center; margin-top: 20px;">
          <el-button type="primary" @click="submitForm">提交</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      selectedDestination: '',
      destinations: [
        { value: 'beijing', label: '北京' },
        { value: 'shanghai', label: '上海' },
        { value: 'guilin', label: '桂林' }
      ],
      tripDate: null,
      name: '',
      phone: '',
      code:"",
      loginUserId:0,
      carouselItems: [
        { id: 1, src: 'https://ts1.cn.mm.bing.net/th/id/R-C.e060521761c159a8c4aced65b9f1994d?rik=PwIU5c%2b6iWnsmw&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd10009%2f132%2fw1999h1333%2f20230120%2f449c-e50c95f86a400256ffb6e686449d1d21.jpg&ehk=J30FWKhwtvL83tCcBCu7w1SY5QLLyzLpI7%2bFFDYrgM4%3d&risl=&pid=ImgRaw&r=0' },
        { id: 2, src: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.jP9o3x5Q9z2nzUpC0lZ5WQHaE7?rs=1&pid=ImgDetMain' },
        { id: 3, src: 'https://www.keaitupian.cn/cjpic/frombd/2/253/1487476093/3518049596.jpg' }
      ]
    };
  },
  methods: {
    Sms() {
      axios.get("http://localhost:8080/sms")
      this.$message({
        message: '发送成功,请注意查收!!!',
        type: 'success'
      });
    },

    submitForm() {
      // 表单提交逻辑
      if (!this.name || !this.phone || !this.selectedDestination || !this.tripDate) {
        this.$message.error('请填写所有必填项');
        return;
      }

      this.$message.success('提交成功');
      console.log('提交信息:', {
        name: this.name,
        phone: this.phone,
        destination: this.selectedDestination,
        tripDate: this.tripDate
      });
    },
    returnToHome: function () {
                if (this.loginUserId == null) {
                    this.$router.push({
                        path: '/loginPage',
                    })
                }
                else {
                    this.$router.push({
                        path: '/serviceindex',
                        query: {
                            loginUserId: this.loginUserId
                        }
                    })
                }
            }
  },
  mounted() {
    this.loginUserId = this.$route.query.loginUserId;
  },
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.box-card {
  margin-bottom: 20px;
}
</style>
